<!-- Dom模板 -->
<template>
  <div class="box" ref="box">
    <!-- Dom内容 -->
    <div
      class="mybox"
      ref="mybox"
      @touchstart="touchstart"
      @touchend="touchend"
    >
      <div class="mybox_header">
        <!-- 标签 -->
        <div class="mybox_top">
          <div>
            <span class="iconfont icon-fangdajing2" @click="search"></span>
            <span class="iconfont icon-lingdang1"></span
            ><span class="iconfont icon-rili1"></span>
          </div>
        </div>
        <!-- 登录后的个人信息 -->
        <div class="mybox_user" v-show="flag">
          <div class="mybox_user_img">
            <img
              :src="
                $store.state.login.loginuserMsg.user === undefined
                  ? '../../../static/img/touxiang.jpg'
                  : $store.state.login.loginuserMsg.user.user_img === 'null'
                  ? '../../../static/img/touxiang.jpg'
                  : $store.state.login.loginuserMsg.user.user_img
              "
              alt=""
              ref="meimg"
            />
          </div>
          <div class="mybox_user_msg">
            <p class="name">
              {{ tokens ? $store.state.login.loginuserMsg.user.name : "" }}
              <span>(Lv.1)</span>
            </p>
            <span class="vipname" @click="geren">完善资料&gt;</span>
          </div>
          <div class="recharge" @click="topUpClick()">充值</div>
        </div>
        <!-- 登录前的个人信息 -->
        <div class="mybox_nouser" v-show="flags">
          <div class="mybox_user_img">
            <img src="../../../static/img/touxiang.jpg" alt="" ref="meimg" />
          </div>
          <div class="mybox_user_msg">
            <p class="name" @click="geren">马上登录</p>
            <span class="vipname">登录后享受更多服务</span>
          </div>
          <div class="recharge">签到</div>
        </div>
        <!-- 个人充值信息 -->
        <div class="mybox_massage">
          <div class="mybox_massage_list">
            <p>{{ tokens ? $store.state.login.loginuserMsg.user.rmb : "0" }}</p>
            <p>点券</p>
          </div>
          <div class="mybox_massage_list">
            <p @click="contact">{{ guanzhu }}</p>
            <p>关注</p>
          </div>
          <div class="mybox_massage_list">
            <p @click="contacted">{{ quanzi }}</p>
            <p>圈子</p>
          </div>
          <div class="mybox_massage_list">
            <p @click="fensic">{{ fensi }}</p>
            <p>粉丝</p>
          </div>
        </div>
      </div>
      <!-- 收听历史 -->
      <div class="mybox_content">
        <div class="mybox_content_head">
          <p>收听历史</p>
          <p @click="history()">更多<span>&gt;</span></p>
        </div>
        <div class="mybox_content_img">
          <div
            class="mybox_content_imgList"
            :style="{ width: historyd.length * 2.7 + 'rem' }"
            @click="history()"
            v-if="historyd.length === 0 ? false : true"
          >
            <div
              v-for="(item, index) in historyd"
              :key="index"
              class="imgLists"
            >
              <img :src="item.book_img_url" alt="" />
            </div>

            <!-- <img src="../../../static/img/v2_qsptv1.png" alt="" />
            <img src="../../../static/img/v2_qsoczf.png" alt="" />
            <img src="../../../static/img/v2_qsoczs.png" alt="" /> -->
          </div>
          <div v-if="historyd.length === 0 ? true : false" class="kong">
            <p>快去收听你喜欢的书吧</p>
          </div>
        </div>
      </div>
      <!-- 个人详情列表 -->
      <div class="mybox_list">
        <div>
          <div class="imgs">
            <img src="../../../static/img/v2_qstj0e.png" alt="" />
          </div>
          <div class="dingyue" @click="dingyue()">
            我的订阅
            <p>在书包里面哦<span>&gt;</span></p>
          </div>
        </div>
        <div>
          <div class="imgs">
            <img src="../../../static/img/v2_qstiwl.png" alt="" />
          </div>
          <div>
            听书计划
            <p>制定一份你的听书计划<span>&gt;</span></p>
          </div>
        </div>
        <div>
          <div class="imgs">
            <img src="../../../static/img/v2_qstir7.png" alt="" />
          </div>
          <div>
            我要赚钱
            <p>
              <img
                src="../../../static/img/v2_qstwgh.png"
                alt=""
              />开启你的副业<span>&gt;</span>
            </p>
          </div>
        </div>
        <div>
          <div class="imgs">
            <img src="../../../static/img/v2_qsti4a.png" alt="" />
          </div>
          <div>
            掌上商城
            <p>
              超级秒杀降价日<img
                src="../../../static/img/v2_qstl1i.png"
                alt=""
              /><span>&gt;</span>
            </p>
          </div>
        </div>
        <div>
          <div class="imgs">
            <img src="../../../static/img/v2_qsthl9.png" alt="" />
          </div>
          <div>
            免流服务
            <p>免流任性玩<span>&gt;</span></p>
          </div>
        </div>
        <div>
          <div class="imgs">
            <img src="../../../static/img/v2_qstj0e.png" alt="" />
          </div>
          <div>
            邀请好友
            <p>
              <img src="../../../static/img/v2_qstl40.png" alt="" />
              邀请就有奖哦<span>&gt;</span>
            </p>
          </div>
        </div>
        <div>
          <div class="imgs">
            <img src="../../../static/img/v2_qsth6l.png" alt="" />
          </div>
          <div>
            帮助与反馈
            <p><span>&gt;</span></p>
          </div>
        </div>
        <div>
          <div class="imgs">
            <img src="../../../static/img/v2_qsthex.png" alt="" />
          </div>
          <div class="shezhi" @click="tuichu()">
            退出
            <p><span>&gt;</span></p>
          </div>
        </div>
      </div>
    </div>
    <div :class="alertFlag ? 'mengceng' : ''"></div>
    <Alert @close="closeAlert()" v-if="alertFlag" :transition="transition">
      <component :is="components"> </component>
    </Alert>
    {{ usermsgs }}
  </div>
</template>

<script>
// import a from './a'; // 引入组件
import Alert from "../../components/alert/alert.vue";
import { alert_parent } from "../../components/alert/alert_mixin";
import geren from "./geren.vue";
import dingyue from "./dingyue.vue";
import tuichu from "./tuichu.vue";
import history from "./history.vue";
import topup from "./topup.vue";
import contact from "./contact.vue";
import fenSi from "./fensi.vue";
import circled from "./circle.vue";
export default {
  name: "",
  mixins: [alert_parent],
  data() {
    return {
      msg: "测试",
      flag: false,
      flags: true,
      guanzhu: 0,
      quanzi: 0,
      fensi: 0,
      historyd: [],
      transition: {
        to: "",
        from: "",
      },
      components: "",
      tokens: sessionStorage.getItem("token") || "",
      arr: [],
    };
  },
  components: {
    Alert,
    geren,
    dingyue,
    tuichu,
    history,
    topup,
    contact,
    fenSi,
    circled,
  },
  // 生命周期 - 创建完成（访问当前this实例）
  created() {
    console.log(this.flag);
    if (sessionStorage.getItem("userId")) {
      this.$store
        .dispatch("login/getUser", {
          userid: sessionStorage.getItem("userId"),
        })
        .then((res) => {
          if (res.code === 200) {
            this.guanzhu = this.$store.state.login.loginuserMsg.guanzhu.num;
            this.quanzi = this.$store.state.login.loginuserMsg.circle.num;
            this.fensi = this.$store.state.login.loginuserMsg.fensi.num;
            this.historyd = this.$store.state.login.loginuserMsg.viewing.cont;
            this.flag = true;
          }
        });

      this.flags = false;
    }
  },
  // 生命周期 - 挂载完成（访问DOM元素）
  mounted() {},
  computed: {
    usermsgs() {
      if (sessionStorage.getItem("userId")) {
        if (this.$store.state.login.loginuserMsg.guanzhu) {
          this.guanzhu = this.$store.state.login.loginuserMsg.guanzhu.num;
          this.quanzi = this.$store.state.login.loginuserMsg.circle.num;
          this.fensi = this.$store.state.login.loginuserMsg.fensi.num;
        }
        return "";
      }
    },
  },

  // Vue方法定义
  methods: {
    touchstart(e) {
      let start = {};
      let flag = true;
      let diffY = null;
      let end = null;
      start = {
        x: e.touches[0].clientX,
        y: e.touches[0].clientY,
      };
      this.$refs["mybox"].style.transition = "";
      this.$refs["mybox"].addEventListener("touchmove", (e) => {
        end = {
          x: e.touches[0].clientX,
          y: e.touches[0].clientY,
        };
        if (Math.abs(end.x - start.x) > Math.abs(end.y - start.y)) {
          flag = false;
        } else {
          flag = true;
        }
        if (this.$refs["box"].scrollTop === 0 && flag) {
          if (this.arr.length <= 1) {
            this.arr.push(e.touches[0].clientY);
          }
          diffY = end.y - this.arr[0];
          if (Math.abs(diffY) > 180) {
            return;
          }
          this.$refs["mybox"].style.transform = `translateY(${diffY * 0.4}px)`;
        }
        if (
          this.$refs["box"].scrollTop + 670 >=
            this.$refs["mybox"].offsetHeight &&
          flag
        ) {
          if (this.arr.length <= 1) {
            this.arr.push(e.touches[0].clientY);
          }
          end = {
            y: e.touches[0].clientY,
          };
          diffY = end.y - this.arr[0];
          if (Math.abs(diffY) > 170) {
            return;
          }
          this.$refs["mybox"].style.transform = `translateY(${diffY * 0.4}px)`;
        }
      });
    },
    touchend() {
      this.$refs["mybox"].style.transition = "all 0.2s linear";
      this.$refs["mybox"].style.transform = `translateY(0)`;
      this.arr = [];
      this.$refs["mybox"].removeEventListener("touchstart", this.touchstart);
      this.$refs["mybox"].removeEventListener("touchmove", this.touchstart);
    },
    geren() {
      if (sessionStorage.getItem("token")) {
        this.components = "geren";
        this.transition = {
          to: "right",
          from: "right",
        };
        this.openAlert();
      } else {
        this.$router.history.push({
          path: "/login",
          query: {
            path: this.$route.path,
          },
        });
      }
    },
    contacted() {
      this.components = "circled";
      this.transition = {
        to: "right",
        from: "right",
      };
      if (sessionStorage.getItem("userId")) {
        this.openAlert();
      }
    },
    dingyue() {
      this.components = "dingyue";
      this.transition = {
        to: "right",
        from: "right",
      };
      if (sessionStorage.getItem("userId")) {
        this.openAlert();
      }
    },
    history() {
      if (this.historyd.length !== 0) {
        this.components = "history";
        this.transition = {
          to: "right",
          from: "right",
        };
        if (sessionStorage.getItem("userId")) {
          this.openAlert();
        }
      }
    },
    tuichu() {
      this.components = "tuichu";
      this.transition = {
        to: "bottom",
        from: "bottom",
      };
      if (sessionStorage.getItem("userId")) {
        // this.tokens=''
        this.openAlert();
      }
    },

    topUpClick() {
      this.components = "topup";
      this.transition = {
        to: "bottom",
        from: "bottom",
      };
      if (sessionStorage.getItem("userId")) {
        this.openAlert();
      }
    },
    contact() {
      this.components = "contact";
      this.transition = {
        to: "right",
        from: "right",
      };
      if (sessionStorage.getItem("userId")) {
        this.openAlert();
      }
    },
    fensic() {
      this.components = "fenSi";
      this.transition = {
        to: "right",
        from: "right",
      };
      if (sessionStorage.getItem("userId")) {
        this.openAlert();
      }
    },
    search() {
      this.$store.commit("bags/queryPath", this.$route.path);
      this.$router.history.push({
        path: "/search",
        query: {
          path: this.$route.path,
        },
      });
    },
  },
};
</script>

<style scoped>
/* @import url(''); 引入css类 */
@import url("../../../static/fonts/iconfont.css");
::-webkit-scrollbar {
  display: none;
}
.kong {
  /* text-align: center; */
  width: 90%;
}
.kong p {
  width: 4.9rem;
  text-align: center;
  margin: 0.533333rem auto;
  font-size: 0.426667rem;
  color: rgb(131, 131, 131);
}
.mengceng {
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.2);
  position: fixed;
  top: 0;
  left: 0;
  transition: all 1s;
}
.box {
  width: 100vw;
  height: calc(100vh - 1.54333rem);
  background-color: rgba(0, 0, 0, 0.02);
  overflow-y: auto;
}

.mybox {
  width: 90%;
  min-height: 2.066667rem;
  margin: 0 auto;
}
.mybox_header {
  width: 100%;
}

.mybox_top {
  width: 100%;
  height: 0.533333rem;
  line-height: 0.533333rem;
  margin: 0.266667rem 0 0 0;
}
.mybox_top span {
  width: 0.613333rem;
  line-height: 0.613333rem;
  opacity: 0.76;
  margin: 0 0.16rem;
  font-size: 0.426667rem;
}
.mybox_top > div {
  width: 27%;
  float: right;
}
.mybox_user {
  width: 100%;
  height: 1.866667rem;
  margin: 10px 0;
}
.mybox_nouser {
  width: 100%;
  height: 1.866667rem;
  margin: 10px 0;
}
.mybox_massage {
  text-align: center;
  width: 100%;
  height: 2.026667rem;
  line-height: 0.533333rem;
  border-radius: 0.266667rem;
  background-color: white;
  margin-bottom: 0.266667rem;
  box-shadow: 0px 0.053333rem 0.16rem 0rem rgba(0, 0, 0, 0.01);
  display: flex;
  justify-content: space-around;
}
.mybox_content {
  overflow: hidden;
  width: 100%;
  height: 4.72rem;
  line-height: 0.533333rem;
  border-radius: 0.266667rem;
  background-color: white;
  margin-bottom: 0.266667rem;
  box-shadow: 0px 0.053333rem 0.16rem 0rem rgba(0, 0, 0, 0.01);
}
.mybox_list {
  padding-top: 0.266667rem;
  width: 100%;
  height: 11.64rem;
  line-height: 0.533333rem;
  border-radius: 0.266667rem;
  background-color: white;
  margin-bottom: 0.266667rem;
  box-shadow: 0px 0.053333rem 0.16rem 0rem rgba(0, 0, 0, 0.01);
}
.mybox_user_img {
  width: 1.6rem;
  height: 1.6rem;
  margin: 0rem 0.266667rem;
  float: left;
  position: relative;
}
.mybox_user_img img {
  width: 100%;
  height: 100%;
  border-radius: 1.653333rem;
  border: 1px solid rgb(143, 59, 59);
}
.imgLists {
  width: 2.24rem;
  float: left;
  margin-right: 0.213333rem;
}
.mybox_user_img input {
  width: 1.6rem;
  position: absolute;
  border: none;
  opacity: 0;
  top: 10px;
  overflow: hidden;
}
.mybox_user_msg {
  width: 4.6rem;
  height: 70%;
  float: left;
  margin-left: 0.426667rem;
  margin-top: 0.16rem;
}
.mybox_user_msg .name {
  width: 100%;
  height: 0.8rem;
  font-weight: bold;
  color: rgba(16, 16, 16, 100);
  font-size: 0.48rem;
  text-align: left;
}
.mybox_user_msg .name span {
  display: inline-block;
  width: 1.013333rem;
  height: 0.453333rem;
  line-height: 0.373333rem;
  border-radius: 0.586667rem;
  background-color: rgba(255, 255, 255, 100);
  color: rgba(171, 171, 171, 100);
  font-size: 0.266667rem;
  text-align: center;
  font-weight: 400;
  border: 0.026667rem solid rgba(198, 198, 198, 100);
}
.mybox_user_msg .vipname {
  width: 3.52rem;
  height: 0.48rem;
  color: rgba(150, 150, 150, 100);
  font-size: 0.32rem;
  text-align: left;
  font-family: PingFangSC-regular;
}
.mybox_user .recharge {
  width: 1.466667rem;
  height: 0.666667rem;
  line-height: 0.666667rem;
  border-radius: 0.72rem;
  background-color: rgba(237, 69, 108);
  text-align: center;
  float: right;
  color: rgba(255, 255, 255, 100);
  font-size: 0.346667rem;
  font-family: "PingFangSC-regular";
  margin-top: 0.346667rem;
  margin-right: 0.07rem;
}
.mybox_massage_list {
  width: 1.333333rem;
  height: 1.253333rem;
  margin-top: 0.426667rem;
}
.mybox_massage_list > p:first-of-type {
  text-align: center;
  width: 100%;
  height: 0.746667rem;
  color: rgba(0, 0, 0, 1);
  font-size: 0.533333rem;
  font-family: PingFangSC-bold;
}
.mybox_massage_list > p:last-of-type {
  width: 100%;
  height: 19px;
  color: rgba(188, 188, 188, 100);
  font-size: 13px;
  font-family: PingFangSC-regular;
}
.mybox_content_head {
  width: 100%;
  height: 1.173333rem;
  color: rgba(0, 0, 0, 1);
}
.mybox_content_head > p:first-of-type {
  float: left;
  line-height: 1.173333rem;
  width: 1.813333rem;
  height: 0.64rem;
  color: rgba(0, 0, 0, 1);
  font-size: 0.373333rem;
  font-weight: bold;
  margin-left: 0.4rem;
  text-align: left;
  font-family: PingFangSC-bold;
}
.mybox_content_head > p:last-of-type {
  float: right;
  line-height: 1.173333rem;
  color: rgba(61, 70, 85, 100);
  font-size: 0.373333rem;
  font-family: PingFangSC-regular;
  margin-right: 0.4rem;
}
.mybox_content_head > p:last-of-type span {
  width: 0.613333rem;
  height: 0.613333rem;
  margin-left: 0.133333rem;
  color: rgba(198, 201, 204, 100);
}
.mybox_content_img {
  width: 100vw;
  overflow-x: auto;
  margin: 0.266667rem 0;
  /* position: relative; */
}
.mybox_content_imgList {
  min-width: 109vw;
  overflow: hidden;
  padding-right: 0.533333rem;
}
.mybox_content_imgList img {
  width: 2.24rem;
  height: 2.933333rem;
  border-radius: 0.106667rem;
  margin: 0 0.16rem;
  float: left;
}
.mybox_list > div {
  width: 100%;
  height: 0.693333rem;
  margin: 0.613333rem 0;
}
.mybox_list > div > div:last-of-type {
  width: 87%;
  height: 0.693333rem;
  color: rgba(0, 0, 0, 1);
  font-size: 0.426667rem;
  float: right;
}
.mybox_list p {
  line-height: 0.693333rem;
  float: right;
  height: 100%;
  color: rgba(158, 158, 158, 100);
  font-size: 0.373333rem;
  text-align: left;
  font-family: PingFangSC-regular;
}
.mybox_list p img {
  margin: 0.053333rem;
  height: 0.506667rem;
  display: inline-block;
  vertical-align: middle;
}
.mybox_list span {
  display: inline-block;
  margin-left: 0.16rem;
  font-weight: 300;
  margin-right: 0.266667rem;
}
.mybox_list .imgs {
  float: left;
  width: 0.506667rem;
  height: 0.506667rem;
  margin-left: 0.453333rem;
}
.mybox_list .imgs img {
  width: 100%;
  height: 100%;
}
.mybox_nouser .mybox_user_img {
  width: 1.6rem;
  height: 1.6rem;
  margin: 0rem 0.266667rem;
  float: left;
  position: relative;
}
.mybox_nouser .mybox_user_img img {
  width: 100%;
  height: 100%;
  border-radius: 1.653333rem;
  border: 1px solid rgb(143, 59, 59);
}
.mybox_nouser .mybox_user_img input {
  width: 1.6rem;
  position: absolute;
  border: none;
  opacity: 0;
  top: 10px;
  overflow: hidden;
}
.mybox_nouser .mybox_user_msg {
  width: 4.6rem;
  height: 70%;
  float: left;
  margin-left: 0.426667rem;
  margin-top: 0.16rem;
}
.mybox_nouser .mybox_user_msg .name {
  width: 100%;
  height: 0.8rem;
  font-weight: bold;
  color: rgba(16, 16, 16, 100);
  font-size: 0.48rem;
  text-align: left;
}
.mybox_nouser .mybox_user_msg .name span {
  display: inline-block;
  width: 1.013333rem;
  height: 0.453333rem;
  line-height: 0.373333rem;
  border-radius: 0.586667rem;
  background-color: rgba(255, 255, 255, 100);
  color: rgba(171, 171, 171, 100);
  font-size: 0.266667rem;
  text-align: center;
  font-weight: 400;
  border: 0.026667rem solid rgba(198, 198, 198, 100);
}
.mybox_nouser .mybox_user_msg .vipname {
  width: 3.52rem;
  height: 0.48rem;
  color: rgba(150, 150, 150, 100);
  font-size: 0.32rem;
  text-align: left;
  font-family: PingFangSC-regular;
}
.mybox_nouser .recharge {
  width: 1.466667rem;
  height: 0.666667rem;
  line-height: 0.666667rem;
  border-radius: 0.72rem;
  background-color: rgba(237, 69, 108);
  text-align: center;
  float: right;
  color: rgba(255, 255, 255, 100);
  font-size: 0.346667rem;
  font-family: "PingFangSC-regular";
  margin-top: 0.346667rem;
  margin-right: 0.07rem;
}
</style>